<style scoped>
.addinput{
//display: flex;
//flex-direction: column;
//justify-content: center;
//align-content: center;
}

.addinput>div>input{
  /*width:300px ;*/
  /*height: 30px;*/
  /*border-radius: 5px;*/
//margin: 0 auto;
//outline-color: #94beae;

}
</style>
<template>
  <div style="width: 87vw;height:90vh;position: relative;margin: 0;padding: 0">
    <div style="padding:20px 10px;">
      <Space>
        <span>用户名：</span>
        <Input v-model="searchData.username" prefix="ios-contact" placeholder="username" clearable style="width: 200px" />
        <span>电话号：</span>
        <Input  v-model="searchData.phone" placeholder="Enter phone" style="width: auto" />
        <Button @click="searchUser"   type="primary" shape="circle" icon="ios-search">查询</Button>
        <Button type="primary" ghost  @click="showAddDialog">新增</Button>

      </Space>
    </div>
    <!--    表格内容-->
    <div style="width: 87vw; height: 78vh; margin: 0; padding: 0">
      <Table border :loading="loadingTable" ref="selection" :columns="columns" :data="states.data" style="height: 72vh ;text-align: center;" :row-class-name="setRowClassName"  >
        <template #status="{ row, index }">
          <TagSelect v-model="tags.data" hide-check-all v-if="row.enabled === true" style="margin-left: 10px">
            <TagSelectOption name="enabled" color="green">可用</TagSelectOption>
          </TagSelect>
          <TagSelect v-model="tags.data" hide-check-all v-if="row.enabled === false" style="margin-left: 10px">
            <TagSelectOption name="disabled" color="red">禁用</TagSelectOption>
          </TagSelect>
        </template>
        <template #action="{ row, index }">
          <Button type="primary" size="small" style="margin-right: 5px" @click="showEditDialog(index, row)">详情</Button>
          <Button type="error" size="small" @click="showDeleteDialog(index, row)">删除</Button>
        </template>


      </Table>
      <div style="height: 6vh ;text-align: left;padding-top: 20px">
        <Page :total="states.data.length" size="small" show-elevator show-sizer />
      </div>

    </div>

    <!--    对话框-->
    <div>
      <Modal
          v-model="editDialog"
          title="编辑"
          @on-ok="editOk"
          @on-cancel="editCancel">
        <div style="">
          <div style="margin-bottom: 10px">
            <span>
              用户名：<Input v-model="updateData.username" placeholder="Enter something..." style="width: 180px" />
            </span>
            <span style="margin-left: 20px">
              <label>电话：</label><Input v-model="updateData.phone" placeholder="Enter something..." style="width: 180px" />
            </span>
          </div>
          <div style="margin-bottom: 10px">
            <span>
              性别：
              <RadioGroup v-model="sex">
                <Radio label="男"></Radio>
                <Radio label="女"></Radio>
              </RadioGroup>
            </span>
            <span style="margin-left: 98px">
              角色：
                  <Select v-model="roleSingle" style="width:200px">
                  <Option v-for="item in roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
            </span>
          </div>

          <div style="margin-bottom: 10px">邮箱：<Input v-model="updateData.email" placeholder="Enter something..." style="width: 435px" /></div>

          <div style="margin-bottom: 10px">地址：<Input v-model="updateData.address" placeholder="Enter something..." style="width: 435px" /></div>

          <div style="margin-bottom: 10px">简介：<Input v-model="updateData.description" type="textarea" placeholder="Enter something..." style="width: 435px" /></div>
        </div>
      </Modal>


      <Modal
          v-model="deleteDialog"
          title="删除"
          @on-ok="deleteOk"
          @on-cancel="deleteCancel">
        <p>请问是否要删除xxx数据</p>
      </Modal>

      <Modal v-model="addDialog" title="新增用户信息" @on-ok="addOk" @on-cancel="addCancel" >
        <div>
          <div>用户名：<Input v-model="addData.username" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
          <div style="margin-left: 15px">密码：<Input v-model="addData.password" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" type="password"/></div>
          <div style="margin-left: 15px">地址：<Input v-model="addData.address" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
          <div style="margin-left: 15px">电话：<Input v-model="addData.phone" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
          <div style="margin-left: 15px">邮箱：<Input v-model="addData.email" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
          <div style="margin-left: 15px">性别：              <RadioGroup v-model="sex" style="margin-bottom: 10px">
            <Radio label='男'></Radio>
            <Radio label='女'></Radio>
          </RadioGroup></div>
          <div style="margin-left: 15px">年龄：<Input v-model="addData.age" placeholder="Enter something..." style="width: 250px" type="number" /></div>



        </div>
      </Modal>
    </div>

  </div>
</template>

<script setup>
import {Page, Radio, RadioGroup, Space, TagSelect, TagSelectOption} from "view-ui-plus";
import requests from "../../public/request.js"
import {reactive, ref} from "vue";
import message from "view-ui-plus/src/components/message/index.js";
import {onMounted} from "vue";
import modal from "view-ui-plus/src/components/modal/index.js";

const tags = reactive({
  data: ['enabled','disabled']
})
const currentPage = ref(1)           // 当前页码
const pageSize = ref(10)              // 每页显示的数据条数
const addDialog = ref(false)
const deleteDialog = ref(false)
const editDialog = ref(false)
const token = window.localStorage.getItem('token')
const AllUser = reactive({
  page:1,
  limit: 10,
  search: null,
  role: null
})
const columns = reactive( [
  {
    type: "selection",
    width: 60,
    align: "center"
  },
  {
    title: "用户名",
    key: "username",
    align: "center"
  },
  {
    title: "账号",
    key: "jobId",
    width: 150,
    align: "center"
  },
  {
    title: "电话",
    key: "phone",
    width: 150,
    align: "center"
  },
  {
    title: "更新时间",
    key: "updatedAt",
    align: "center"
  },
  {
    title: "状态",
    slot: "status",
    width: 120,
    align: "center",
  },
  {
    title: "操作",
    slot: "action",
    width: 150,
    align: "center"
  }
])
const states = reactive({
  data:[],
  role:[],
})
const loadingTable = ref(true)
const sex = ref('男')

const updateData = reactive({
  id: 0,
  username: '',
  address: '',
  phone: '',
  email: '',
  age: '',
  signature: '',
  sex: '',
  avatar: '',
  nickname: '',
  description: '',
  enabled: true,
  isExpired: false,
  passwordExpired: false,
  recommend: false,
  isLocked: false
})
const roleList= reactive([
  {
    value: 1,
    label: '管理员'
  },
  {
    value: 2,
    label: '老师'
  },
  {
    value: 3,
    label: '学生'
  }
])
const userLock = reactive({
  id: -1,
  isLock: 1
})

/**
 * 配置代码
 */
message.config({
  background: true
})
function setRowClassName(row, index) {
  return 'custom-row';
}

onMounted(() => {
  getAll()
})

/**
 * 方法函数
 */

function getAll() {

  requests.userAllCurrent(AllUser,token).then((res)=>{
    console.log(res)
    // states.data = res.data.data
    // console.log(res.data.data)
    loadingTable.value = false
    for (let i = 0; i < res.data.data.length; i++) {
      states.data[i] = res.data.data[i].user
      states.role[i] = res.data.data[i].role.rid
    }
    console.log("getAll:",states.data.length)
  })
}

function handleBeforeSwitchChange(index, row) {
  return new Promise((resolve) => {
    this.$Modal.confirm({
      title: '切换确认',
      content: '您确认要切换开关状态吗？',
      onOk: () => {
        resolve();
        message.success('切换成功')
      }
    })
  })
}

function handlePageChange(newPage) {
  this.currentPage = newPage;   // 更新当前页码
}

const addData = reactive({
  username: '',
  password: '',
  address: '',
  phone: '',
  email: '',
  sex: 1,
  age: ''
})
function showAddDialog(){
  addDialog.value = true

}
function addOk () {
  if (sex.value === '男') {
    addData.sex = 1
  }else {
    addData.sex = 0
  }
  requests.userAdd(addData, token).then((res)=>{
    if (res.data.code===200) {
      message.success('新增成功')
      getAll()
    }
    else {
      message.error('新增失败')
    }
  })
}
function addCancel () {
  message.info('取消新增')
}



const deleteId = ref(0)
function showDeleteDialog(index, row){
  deleteDialog.value = true
  deleteId.value = row.id
}
function deleteOk(){
  deleteDialog.value = false;
  console.log(deleteId.value)
  requests.userDelete(deleteId.value, token).then((res)=>{
    console.log("deleteResult:",res)
    if (res.data.code === 200) {
      message.success('删除成功')
    }else {
      message.error('删除失败')
    }
  })

}
function deleteCancel(){
  deleteDialog.value = false;
  message.info('取消删除')
}

const roleSingle = ref(1)
function showEditDialog(index, row){
  editDialog.value = true
  updateData.id = row.id
  updateData.username = row.username
  updateData.address = row.address
  updateData.phone = row.phone
  updateData.email = row.email
  updateData.age = row.age
  updateData.signature = row.signature
  updateData.sex = row.sex
  updateData.avatar = row.avatar
  updateData.nickname = row.nickname
  updateData.description = row.description
  roleSingle.value = states.role[index]
  if (row.sex === 1) {
    sex.value = '男'
  }else {
    sex.value = '女'
  }
}
function editOk(){
  loadingTable.value = true
  editDialog.value = false
  requests.userEdit(updateData,token).then((res)=>{
    console.log("editResult:",res)
    console.log("updateData:",updateData)
    if (res.data.code === 200) {
      getAll()
      message.success('修改成功')
    }
    else {
      loadingTable.value = false
      message.error('修改失败')

    }
  })

}
function editCancel(){
  editDialog.value = false;
}



const searchData = reactive({
  username: '',
  phone: ''
})
function searchUser(){
  loadingTable.value = true
  if (searchData.username === '' && searchData.phone === '') {
    getAll()
  }
  else {
    requests.userCurrent(searchData,token).then((res)=>{
      loadingTable.value = false
      console.log("searchResult:",res)
      if (res.data.code === 200) {
        states.data = []
        states.data[0] = res.data.data.user
        message.success('查询成功')
        console.log(loadingTable.value)
      }
      else {
        message.error(res.data.message)
      }
    })
  }
}


</script>